import React, { Component } from 'react';
import pic from '../assets/01-首页-快捷入口_02.png'
import "../styles/Cate.scss"

class Cate extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentIndex: 0, //用来保存点击的一级分类的下标
            catelist: [ //一级分类列表
                {
                    name: '活动专区',
                    list2: [ //二级分类列表
                        {
                            name: '面部护理',
                            list3: [ //三级分类列表
                                { pic, name: '卸妆' }, { pic, name: '乳液' },
                                { pic, name: '精华' }, { pic, name: '面霜' },
                            ]
                        },
                        {
                            name: '手部护理',
                            list3: [
                                { pic, name: '护手霜' }, { pic, name: '手摸' },
                                { pic, name: '精华' }, { pic, name: '面霜' },
                            ]
                        }
                    ]
                },
                {
                    name: '品牌',
                    list2: [ //二级分类列表
                        {
                            name: '面部护理',
                            list3: [ //三级分类列表
                                { pic, name: '卸妆' }, { pic, name: '乳液' },
                                { pic, name: '精华' }, { pic, name: '面霜' },
                            ]
                        },
                        {
                            name: '手部护理',
                            list3: [
                                { pic, name: '护手霜' }, { pic, name: '手摸' },
                                { pic, name: '精华' }, { pic, name: '面霜' },
                            ]
                        }
                    ]
                },
                {
                    name: '美容护肤',
                    list2: [ //二级分类列表
                        {
                            name: '面部护理',
                            list3: [ //三级分类列表
                                { pic, name: '卸妆' }, { pic, name: '乳液' },
                                { pic, name: '精华' }, { pic, name: '面霜' },
                            ]
                        },
                        {
                            name: '手部护理',
                            list3: [
                                { pic, name: '护手霜' }, { pic, name: '手摸' },
                                { pic, name: '精华' }, { pic, name: '面霜' },
                            ]
                        }
                    ]
                },
                {
                    name: '彩妆',
                    list2: [ //二级分类列表
                        {
                            name: '面部护理',
                            list3: [ //三级分类列表
                                { pic, name: '卸妆' }, { pic, name: '乳液' },
                                { pic, name: '精华' }, { pic, name: '面霜' },
                            ]
                        },
                        {
                            name: '手部护理',
                            list3: [
                                { pic, name: '护手霜' }, { pic, name: '手摸' },
                                { pic, name: '精华' }, { pic, name: '面霜' },
                            ]
                        }
                    ]
                },
                {
                    name: '香水',
                    list2: [
                        {
                            name: '男士香水',
                            list3: [
                                { pic, name: '古龙' }, { pic, name: '大宝' },
                                { pic, name: '青蛙王子' }, { pic, name: '精品香水' },
                            ]
                        },
                        {
                            name: '女士香水',
                            list3: [
                                { pic, name: '香奈儿' }, { pic, name: '欧莱雅' },
                                { pic, name: '纪梵希' }, { pic, name: '精品香水' },
                            ]
                        }
                    ]
                },
                {
                    name: '酒类',
                    list2: [ //二级分类列表
                        {
                            name: '面部护理',
                            list3: [ //三级分类列表
                                { pic, name: '卸妆' }, { pic, name: '乳液' },
                                { pic, name: '精华' }, { pic, name: '面霜' },
                            ]
                        },
                        {
                            name: '手部护理',
                            list3: [
                                { pic, name: '护手霜' }, { pic, name: '手摸' },
                                { pic, name: '精华' }, { pic, name: '面霜' },
                            ]
                        }
                    ]
                },
                {
                    name: '腕表首饰',
                    list2: [ //二级分类列表
                        {
                            name: '面部护理',
                            list3: [ //三级分类列表
                                { pic, name: '卸妆' }, { pic, name: '乳液' },
                                { pic, name: '精华' }, { pic, name: '面霜' },
                            ]
                        },
                        {
                            name: '手部护理',
                            list3: [
                                { pic, name: '护手霜' }, { pic, name: '手摸' },
                                { pic, name: '精华' }, { pic, name: '面霜' },
                            ]
                        }
                    ]
                },
                {
                    name: '服饰箱包',
                    list2: [ //二级分类列表
                        {
                            name: '面部护理',
                            list3: [ //三级分类列表
                                { pic, name: '卸妆' }, { pic, name: '乳液' },
                                { pic, name: '精华' }, { pic, name: '面霜' },
                            ]
                        },
                        {
                            name: '手部护理',
                            list3: [
                                { pic, name: '护手霜' }, { pic, name: '手摸' },
                                { pic, name: '精华' }, { pic, name: '面霜' },
                            ]
                        }
                    ]
                },
                {
                    name: '食品保健',
                    list2: [ //二级分类列表
                        {
                            name: '面部护理',
                            list3: [ //三级分类列表
                                { pic, name: '卸妆' }, { pic, name: '乳液' },
                                { pic, name: '精华' }, { pic, name: '面霜' },
                            ]
                        },
                        {
                            name: '手部护理',
                            list3: [
                                { pic, name: '护手霜' }, { pic, name: '手摸' },
                                { pic, name: '精华' }, { pic, name: '面霜' },
                            ]
                        }
                    ]
                },

            ]
        }
    }
    componentWillMount(){
        this.setState({currentIndex:2})
    }
    handleClick(index) {
        this.setState({ currentIndex: index });
    }
    render() {
        return (
            <div className='cate'>
                {/* 一级列表 */}
                <div className="left">
                    {
                        this.state.catelist.map((item, index) => {
                            return (
                                <div onClick={() => { this.handleClick(index) }} className={'name '+ (this.state.currentIndex==index?'active':'')} key={index}>{item.name}</div>
                            )
                        })
                    }
                </div>

                <div className="right">
                    {/* 二级列表 */}
                    {
                        //item2是每个二级分类
                        this.state.catelist[this.state.currentIndex].list2.map((item2, index) => {
                            return (
                                <div className="list2" key={index}>
                                    <h3> {item2.name} </h3>
                                    {/* 三级列表 */}
                                    <div className="list3">
                                        {
                                            //item2.list3是二级分类的三级分类列表
                                            //item3是每个三级分类
                                            item2.list3.map((item3, index) => {
                                                return (
                                                    <div className="item3" key={index}>
                                                        <img src={item3.pic} alt="" />
                                                        <div className="name">{item3.name}</div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Cate;